<style lang="less">
.invoice-details {
  .descriptions__item {
    &--red {
      color: #ff3c3c;
    }
    &--blue {
      color: #386cff;
    }
  }
}
</style>

<template>
  <a-drawer
    class="invoice-details"
    :width="720"
    :visible="visible"
    @cancel="handleCancel"
    unmountOnClose
    :footer="false"
  >
    <template #title> 开票详情 </template>
    <a-descriptions :data="invoiceInfoData" title="发票信息" :column="1">
      <template #value="{ value, data }">
        <template v-if="data.name">
          <template v-if="data.name === 'invoiceAmount'">
            <span class="descriptions__item descriptions__item--red"
              >￥{{ data.value }}</span
            >元
          </template>
          <template v-else-if="data.name === 'invoiceType'">
            {{ data.value }}（<span
              class="descriptions__item descriptions__item--blue"
              >{{ data.value1 }}</span
            >）
          </template>
          <span></span>
        </template>
        <template v-else>{{ data.value }}</template>
      </template>
    </a-descriptions>
    <a-descriptions
      :data="receivingMailbox"
      title="收件邮箱"
      :style="{ marginTop: '49px' }"
      :column="1"
    ></a-descriptions>
    <a-table
      :columns="invoiceOrderColumns"
      :data="invoiceOrderData"
      :pagination="false"
    >
      <template #amount="{ record }">{{
        (record.amount / 100).toFixed(2)
      }}</template>
      <template #startDate="{ record }">{{
        dateFormat(record.startDate)
      }}</template>
    </a-table>
  </a-drawer>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  defineProps,
  defineEmits,
  withDefaults,
  watchEffect,
  toRefs,
} from "vue";
import dateFormat from "ourwill-feutil/common/dateFormat";
import { order } from "@/api";

interface PropsType {
  visible: boolean;
  orderId: number | "";
  orderData: any;
  invoiceType: number;
}

interface EmitType {
  (e: "changeInvoiceDetailsDrawerVisible", v: boolean): void;
}

const props = withDefaults(defineProps<PropsType>(), {
  visible: false,
  orderId: "",
  orderData: "",
  invoiceType: 0,
});
const emit = defineEmits<EmitType>();

const { orderData } = toRefs(props);

// const orderDataRef = toRef(props.orderData);
const handleCancel = () => {
  emit("changeInvoiceDetailsDrawerVisible", false);
};

const invoiceInfoData = ref([
  {
    label: "申请时间",
    value: "",
  },
  {
    label: "开票时间",
    value: "",
  },
  {
    label: "发票总额",
    value: "",
    name: "invoiceAmount",
  },
  {
    label: "发票抬头",
    value: "",
  },
  {
    label: "身份证号",
    value: "",
  },
  {
    label: "开具类型",
    value: "",
  },
  {
    label: "发票类型",
    value: "增值税普通发票",
    value1: "电子发票",
    name: "invoiceType",
  },
  {
    label: "备注",
    value: "-",
  },
]);
// 收件邮箱
const receivingMailbox = ref([
  {
    label: "邮箱",
    value: "",
  },
  {
    label: "开票订单",
    value: "",
  },
]);
// 开票订单
const invoiceOrderColumns: any = [
  {
    title: "用户名",
    dataIndex: "createUsername",
    width: 120,
  },
  {
    title: "订单号",
    dataIndex: "orderNo",
  },
  {
    title: "订购服务",
    dataIndex: "description",
    width: 128,
  },
  {
    title: "金额",
    slotName: "amount",
    width: 80,
  },
  {
    title: "付款方式",
    dataIndex: "paymentType",
    width: 107,
  },
  {
    title: "购买时间",
    slotName: "startDate",
  },
];
const invoiceOrderData = ref([]);

const getInvoiceDetails = async () => {
  const { ok, data } = await order.getInvoiceDetails(orderData.value.id);
  if (!ok) return;
  receivingMailbox.value[0].value = data.data.info.receiveEmail;
  invoiceOrderData.value = data.data.order;
  invoiceInfoData.value[7].value = data.data.info.remark
    ? data.data.info.remark
    : "-";
  invoiceInfoData.value[3].value = data.data.info.invoiceTitle;
  invoiceInfoData.value[4].value = data.data.info.idCard;
  invoiceInfoData.value[2].value = data.data.amount;
  if (+data.data.info.titleType === 0) {
    invoiceInfoData.value[5].value = "个人";
  } else {
    invoiceInfoData.value[5].value = "企业";
  }
  if (+data.data.info.invoiceType === 0) {
    invoiceInfoData.value[6].value = "增值税普通发票";
  } else {
    invoiceInfoData.value[6].value = "增值税专用发票";
  }
  if (+orderData.value.invoiceType === 0) {
    invoiceInfoData.value[6].value1 = "电子发票";
  } else {
    invoiceInfoData.value[6].value1 = "专用发票";
  }
};
watchEffect(() => {
  if (orderData.value) {
    getInvoiceDetails();
    invoiceInfoData.value[0].value = dateFormat(orderData.value.applyTime);
  }
  if (+props.invoiceType === 0) {
    invoiceInfoData.value[1].value = "未开票";
  } else {
    invoiceInfoData.value[1].value = orderData.value.invoiceTime
      ? dateFormat(orderData.value.invoiceTime)
      : "";
  }
});
</script>
